<template>
  <div class="component2-container">
    <!-- 子导航 -->
    <div class="sub-nav">
      <ul>
        <li v-for="item in list" :key="item.id">
        <RouterLink 
        :to="{
          name: item.name,
          params:{
          id: item.id,
          name: item.name,
          content: item.content
          }
        }" class="nav-link" active-class="active">{{ item.name }}</RouterLink>
        </li>
      </ul>
    </div>

    <!-- 展示区域 -->
    <div class="sub-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup>
import { RouterLink,RouterView } from 'vue-router';
import { ref } from 'vue';
const list = ref([
  { id: 1, name: '2.1', content: '这是 2.1 的内容', path: '/2/child1' },
  { id: 2, name: '2.2', content: '这是 2.2 的内容' , path: '/2/child2'},
  { id: 3, name: '2.3', content: '这是 2.3 的内容', path: '/2/child3' }, 
])
</script>
<style scoped>
.component2-container {
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sub-nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.nav-link {
  padding: 8px 16px;
  font-size: 16px;
  color: #fff;
  background-color: #4db5ff;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: #3a9ce0;
}

.nav-link.active {
  background-color: #3a9ce0;
  font-weight: bold;
}

.sub-content {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f7f7f7;
  min-height: 100px;
  text-align: center;
}
</style>